<template>
  <div class="app-container">
    <el-row type="flex" align="center" :gutter="20">
      <el-form class="filter-block" label-position="left" :inline="true" label-width="auto">
        <el-form-item label="关键字:">
          <el-input
            placeholder="名称 | 法人"
            v-model="filterData.keyword"
            maxlength="20"
            size="small"
            clearable
          >
          </el-input>
        </el-form-item>
        <el-form-item label="报名时间:">
          <el-date-picker
            v-model="filterData.time"
            value-format="yyyy-MM-dd HH:mm:ss"
            size="small"
            clearable
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            align="left"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="审核状态:">
          <el-cascader
            v-model="filterData.auditState"
            clearable
            placeholder="全部类型"
            :options="auditStateOption"
            size="small"
            :props="{value:'id',label:'data'}"
            filterDataable
          ></el-cascader>
        </el-form-item>
        <el-form-item>
          <el-button size="small" icon="el-icon-search" type="primary" @click="refreshTable">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row style="margin-top: 20px">
      <el-table v-loading="tableConf.loading" :stripe="true" :border="true" :data="tableData">
        <el-table-column align="center" width="50" prop="id" label="ID" />
        <el-table-column align="center" prop="comName" label="企业名称" />
        <el-table-column align="center" label="企业LOGO" width="130px">
          <template slot-scope="{row}">
            <el-image
              style="width: 60px; height: 60px"
              :preview-src-list="[row.logoUrl]"
              :src="row.logoUrl"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="50px" prop="legalPersonName" label="法人姓名"/>
        <el-table-column align="center" min-width="50px" prop="scaleText" label="企业规模"/>
        <el-table-column align="center" min-width="80px" prop="jobTypeText" label="行业"/>
        <el-table-column align="center" min-width="80px"  label="审核状态">
          <template slot-scope="{row}">
            {{row.auditStateText}}
            <template v-if="row.auditState===2">
              ({{row.refuseCause}})
            </template>
          </template>
        </el-table-column>
        <el-table-column align="center" width="300px" label="操作">
          <template slot-scope="{row}">
            <el-button size="mini" icon="el-icon-check" type="primary" v-if="row.auditState===3" @click="updateRowState(row.id,1)">通过
            </el-button>
            <el-button size="mini" icon="el-icon-close" type="primary" v-if="row.auditState===3" @click="openDetail2(row.id,0)">拒绝
            </el-button>
            <el-button size="mini" icon="el-icon-postcard" type="primary" @click="openDetail(row.sid,row.cid,1)">参会岗位
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row style="margin-top: 20px">
      <el-pagination
        :page-sizes="tableConf.sizes"
        :page-size="tableConf.size"
        :total="tableConf.total"
        :current-page="tableConf.page"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-row>
    <el-dialog width="50%"  v-if="visible[0]" :visible.sync="visible[0]" title="拒绝理由" :close-on-click-modal="false"
               :close-on-press-escape="false" :destroy-on-close="true"
    >
      <Refuse ref="detail" :id="detailId" :closeDialog="closeDialogSon"></Refuse>
      <span slot="footer" class="dialog-footer">
        <el-button plain type="primary" @click="visible[0] = false">取 消</el-button>
        <el-button type="primary" class="primary" @click="$refs.detail.submit()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog width="70%" :append-to-body="true" v-if="visible[1]" :visible.sync="visible[1]" title="参会岗位" :close-on-click-modal="false"
               :close-on-press-escape="false" :destroy-on-close="true"
    >
      <JobFairsPublish ref="detail" :sid="sid" :cid="cid" :closeDialog="closeDialogSon"></JobFairsPublish>
      <span slot="footer" class="dialog-footer">
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {getJobFairListApi, updateJobFairApi} from "@/api/jobFair";
import Refuse from '@/components/JobFairsCode/Refuse'
import JobFairsPublish from '@/views/jobFairs/jobFairsPublish'

export default {
  components: { Refuse,JobFairsPublish },
  name:'scanRecord',
  data() {
    return {
      tableData: [],
      tableConf: {
        page: 1,
        sizes: [10, 20, 50, 100],
        total: 0,
        size: 10,
        loading: false
      },
      sid:null,
      cid:null,
      filterData:{
        keyword: '',
        typeId: [],
        time:[],
        auditState:[],
      },
      auditStateOption: [
        {id: 3,data: "待审核"},
        {id: 1,data: "已通过"},
        {id: 2,data: "未通过"},
      ],
      placeTypeLoading: true,
      placeTypeOption: [],
      visible: {//控制弹窗显示
        0: false,
        1: false,
      },
      detailId: null,
    }
  },
  watch: {

  },
  mounted() {
    this.createParams(this);
    this.getTableList()
  },
  props:['id','closeDialog'],
  methods: {

    // 每页显示数量change
    handleSizeChange(e) {
      this.tableConf.size = e
      this.getTableList()
    },
    // 当前页change
    handleCurrentChange(e) {
      this.tableConf.page = e
      this.getTableList()
    },
    //获取列表
    getTableList() {
      this.tableConf.loading = true
      let startTime = "";
      let endTime = "";
      if(this.filterData.time!=null)
      {
        startTime = this.filterData.time[0];
        endTime = this.filterData.time[1];
      }
      getJobFairListApi({ page: this.tableConf.page, limit: this.tableConf.size, sid:this.id,keyWord: this.filterData.keyword,auditState: this.filterData.auditState[0],
        startTime,
        endTime}).then((res) => {
        this.tableData = res.list;
        this.tableConf.total = res.count;
      }).finally(() => {
        this.tableConf.loading = false
      })
    },
    updateRowState(id, auditState) {
      updateJobFairApi({ id, auditState }).then(() => {
        this.$message.success('审核成功')
      }).finally(() => {
        this.getTableList()
      })
    },
    //打开添加/编辑页
    openDetail(sid,cid,index) {
      this.sid = sid
      this.cid = cid
      this.visible[index] = true
    },
    //打开添加/编辑页
    openDetail2(id = null,index) {
      this.detailId = id
      this.visible[index] = true
    },
    //关闭指定弹窗并刷新页面
    closeDialogSon(index) {
      this.visible[index] = false
      this.getTableList()
    },
    refreshTable() {
      this.tableConf.page = 1
      this.getTableList()
    }
  }
}
</script>
<style lang="scss" scoped>
.filterData-block {
  .el-form-item {
    margin-bottom: 0;
  }
}
</style>
